<template>
  <div class="music">
    <div class="container" v-if="Object.keys(musicDetail).length">
      <div class="title">{{musicDetail.name}}</div>
      <div class="author">
        <span v-for="ar in musicDetail.ar" :key="ar.id">{{ar.name}}</span> - {{musicDetail.al.name}}
      </div>
      <div class="showContainer">
        <div class="animationContainer">
          <div class="circle"></div>
          <img :class="isPlay ? 'needle needleActive' : 'needle'" src="../../assets/images/song/needle.png" alt="杆子">
          <div :class="isPlay ? 'discContainer discActive' : 'discContainer'">
            <img class="disc" src="../../assets/images/song/disc.png" alt="转盘">
            <img class="musicImg" :src="musicDetail.al.picUrl" :alt="musicDetail.al.name">
          </div>
          <div class="operation">
            <button @click="handleClick">播放</button>
            <button>收藏</button>
            <button>喜欢</button>
          </div>
        </div>
        <div class="lyricsContainer" v-if="Object.keys(lyricInfo).length">
          <p v-for="(lyric, index) in lyrics" :key="index">{{lyric}}</p>
          <p v-if="lyricInfo.lyricUser">歌词贡献者：{{lyricInfo.lyricUser.nickname}}</p>
        </div>
        <div class="lyricsContainer" v-else>暂无歌词</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Music',
  props: ['id'],
  data () {
    return {
      musicDetail: {},
      lyricInfo: {}
    }
  },
  computed: {
    isPlay () {
      return this.id === this.$store.state.musicId ? this.$store.state.isPlay : false
    },
    lyrics () {
      const data = this.lyricInfo.lrc.lyric.split(/\[.*?\]/g)
      return data
    }
  },
  methods: {
    handleClick () {
      // 当前为false的时候，下次是为true
      this.$store.dispatch('getMusic', this.id)
    },
    // 获取music信息
    async getMusicInfo (id) {
      const res = await this.$http.get(`/song/detail?ids=${id}`)
      // console.log(res.data.songs)
      this.musicDetail = res.data.songs[0]
      // 获取歌词
      const lrc = await this.$http.get(`lyric?id=${id}`)
      if (lrc.data.nolyric) {
        this.lyricInfo = {}
        return
      }
      this.lyricInfo = lrc.data
    }
  },
  created () {
    this.getMusicInfo(this.id)
  }
}
</script>

<style lang="less" scoped>
.music{
  margin-top: 5px;
}

.container{
  width: 1100px;
  margin: 0 auto;
  background-image: linear-gradient(to bottom right, #dfdfdf, #fff);
}

.title{
  width: 100%;
  padding: 10px 0;
  text-align: center;
  font-size: 20px;
  color: #2e2e2f;
  font-weight: 600;
}

.author{
  width: 100%;
  padding: 5px 0;
  text-align: center;
  color: #86878a;
  span:not(:last-child, .name)::after{
    content: " / ";
    margin: 5px 0;
  }
}

.showContainer{
  width: 100%;
  height: 700px;
  padding: 40px;
  overflow: hidden;
}

.animationContainer{
  // background-color: cadetblue;
  // padding: 20px;
  position: relative;
  .circle{
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background-color: #f7f7f8;
    position: absolute;
    top: -18px;
    left: 230px;
    box-sizing: border-box;
    box-shadow: 10 10 10 10 black;
    border: 10px solid #d1d1d1;
    z-index: 100;
  }
  .needle{
    position: absolute;
    top: 15px;
    left: 230px;
    z-index: 99;
    transform-origin: 30px 0px;
    transform: rotate(-30deg);
    transition: transform 0.5s;
  }
  .needleActive{
    transform: rotate(0);
  }
  .discContainer{
    position: absolute;
    top: 120px;
    .disc{
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
      z-index: 88;
    }
    .musicImg{
      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      width: 300px;
      border-radius: 50%;
      background-color: aqua;
      transform: translate(-50%, -50%);
    }
  }
  .discActive{
    animation: discAnimation 5s 0.6s infinite linear;
  }
  @keyframes discAnimation {
    to{
      transform: rotate(0);
    }
    from{
      transform: rotate(-360deg);
    }
  }
}

.lyricsContainer{
  padding: 20px;
  margin-left: 50%;
  width: 40%;
  height: 600px;
  overflow: auto;
  text-align: center;
  // background-color: violet;
  p{
    margin: 20px 0;
  }
}

.operation{
  width: 100%;
  padding: 0 20px 20px;
  text-align: center;
  button{
    margin: 0 20px;
    width: 60px;
    height: 30px;
    font-size: 16px;
    border-radius: 20px;
    border: 1px solid #2e2e2f;
    color: #2e2e2f;
    cursor: pointer;
  }

}

</style>
